<template>
  <div ref="boxRef" class="box"></div>
  <div
      ref="dragRef"
      class="dragButton"
      draggable="true"
      :style="{ top: top + 'px', left: left + 'px' }"
    >
      拖拽我
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import useDrag from './useDragable'
let boxRef = ref<HTMLDivElement | null | undefined>(null);
let dragRef = ref<HTMLDivElement | null | undefined>(null);
const { top, left } = useDrag(dragRef, boxRef)



</script>

<style lang="less" scoped>
.box {
  width: 500px;
  height: 300px;
  margin: 10px auto;
  border: 1px solid #ccc;
  position: relative;
}
.dragButton {
  width: 60px;
  height: 60px;
  background: red;
  position: absolute;
  color: #fff;
  line-height: 60px;
  text-align: center;
  cursor: move;
}
</style>
